<template>
  <div>
    <!-- 头部 -->
    <div class="zxr_top">
      <p class="zxr_detail_hedaer">
        <van-icon name="arrow-left" style="padding-left: 12px"></van-icon>
        <span>课程详情</span>
        <van-icon name="share-o" style="padding-right: 12px"></van-icon>
      </p>
    </div>

    <!-- <div class="zxr_ui">
      <ul>
        <li>
          <van-icon name="arrow-left" style="padding-left: 12px"></van-icon>
        </li>
        <li>课程介绍</li>
        <li>课程大纲</li>
        <li>课程评价</li>
        <li>
          <van-icon name="share-o" style="padding-right: 12px"></van-icon>
        </li>
      </ul>
    </div> -->

    <div class="zxr_section">
      <div class="zxr_test">
        <div>
           <p class="zxr_class">
          <span style="padding-top:12px">{{ detailList.title }}</span>
          <span><van-icon name="star-o"></van-icon></span>
        </p>
        <p class="zxr_class">
          <span style="color:#eb6100">免费</span>
        </p>
        <p class="zxr_free">
          <span style="color:rgba(0,0,0,.45)">共{{ detailList.is_free }}课时</span>
          <span style="color:rgba(0,0,0,.45)">|</span>
          <span style="color:rgba(0,0,0,.45)">共{{ detailList.sales_num }}已报名</span>
        </p>
        <p style="color:rgba(0,0,0,.45)">开课时间:</p>
        </div>
       
      </div>

      <!-- 教学团队 -->
      <!-- <div class="zxr_teacher">
        <div>
            <p>教学团队</p>
        <img :src="teacher.teacher_avatar" alt="">
        <p>{{teacher.teacher_name}}</p>
        </div>
      
      </div> -->


      <!-- 课程介绍 -->
      <div class="zxr_intrudoce">
        <div>
          <p>课程介绍</p>
        </div>
      </div>


      <!-- 课程大纲 -->
      <div class="zxr_big"> 
            <div>
              <p>课程大纲</p>
              <div v-for="(item,index) in bigList" :key="index">
                 
                  <p>
                    <span class="zxr_hui">回放</span>
                    <span>{{item.periods_title}}</span>
                    </p>
                  <p>
                    <span>{{item.teachers[0].teacher_name}}</span>
                   <span>{{item.total_start_play}}</span> 
                    </p>
              </div>
            </div>
      </div>

    </div>
  </div>
</template>

<script>
import { zxrDetail,zxrBig } from "../../../utils/http.js";
export default {
  name: "detail",
  data() {
    return {
      detailList: [],
      teacher:[],
      bigList:[]
    };
  },

  methods: {
    getDetail() {
      var id = this.$route.params.id;
      console.log(id);
      zxrDetail(id).then((res) => {
        console.log(res)
        this.detailList = res.info;

        
        
        this.teacher=res.teachers[0]
        console.log(this.detailList,this.teacher);
      });
    },


    // 课程大纲
    getBIgInfo(){
       var id=this.$route.params.id

      zxrBig(id).then(res=>{
        console.log(res)
        this.bigList=res
      })
    }
  },
  mounted() {
    this.getDetail();
    this.getBIgInfo()
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/css/index.scss";
.zxr_detail_hedaer {
  @include FlexArroud();
  font-size: 24px;

}
.zxr_ui ul {
  @include FlexArroud();
  font-size: 17px;
}
.zxr_section{
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}
.zxr_test{
  width: 100%;
  height: 150px;
  font-size: 17px;
  background-color: #fff;
}
.zxr_test div{
  width: 90%;
  height: 100%;
  margin:  0 auto
}
.zxr_class{
  padding-top: 8px;
   @include FlexSpace();
}
.zxr_free{
  padding-top: 6px;
}

// 教学团队
.zxr_teacher{
  width: 100%;
  height: 140px;
  margin-top: 12px;
  font-size: 14px;

  background-color: #fff;
}
.zxr_teacher div{
  width: 90%;
  height: 140px;
  margin: 0 auto;
}
.zxr_teacher p{
  padding-top: 6px;
}
.zxr_teacher img{
  width: 60px;
  height: 60px;
  border-radius: 20px;
}

// 课程介绍
.zxr_intrudoce{
  width: 100%;
  height: 100px;
  background-color: #fff;
  margin-top: 12px;
  font-size: 17px;
}
.zxr_intrudoce div{
  width: 90%;
  height: 100px;
  margin: 0 auto;
}

// 课程大纲
.zxr_big{
  width: 100%;
  height: 400px;
  background-color: #fff;
  margin-top: 14px;
  font-size: 17px;
}
.zxr_big div{
  margin: 0 auto;
  width: 90%;
  height: 400px;
}
.zxr_hui{
  width: 40px;
  height: 20px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  color: hsla(0,0%,100%,.85);
  background-color: #ea7a2f;
}

</style>